<template>
    <modal :value="value" @on-ok="save" @on-visible-change="visibleChange"
           :draggable="!$config.mask"
           :mask="$config.mask"
           :mask-closable="!$config.mask"
           width="800"
    >
        <p slot="header">
            修改密码
        </p>
        <Form ref="passwordForm" label-position="top" :model="currentUser" :rules="passwordRule">
            <FormItem label="旧密码" prop="currentPassword">
                    <Input type="password" v-model="currentUser.currentPassword" placeholder=""
                           :maxlength="1024"></Input>
            </FormItem>
            <FormItem label="新密码" prop="newPassword">
                    <Input ref="password" type="password" v-model="currentUser.newPassword" placeholder="" :maxlength="1024"></Input>
            </FormItem>
            <FormItem label="确认密码" prop="confirmPassword">
                    <Input type="password" v-model="currentUser.confirmPassword" placeholder=""
                           :maxlength="1024"></Input>
            </FormItem>
        </Form>
        <div slot="footer">
            <Button @click="cancel" icon="md-close">取消</Button>
            <Button @click="save" type="primary" icon="md-checkmark">确定</Button>
        </div>
    </modal>
</template>

<script lang="ts">
import {Component, Vue, Prop, Watch, Emit} from 'vue-property-decorator';
import AbpBase from '@/lib/abpbase';

@Component({
    components: {},
})
export default class PasswordChange extends AbpBase {
    name: string = 'PasswordChange';

    @Prop({type: Boolean, default: false}) value: boolean;

    currentUser: { currentPassword: string, newPassword: string, confirmPassword: string } = {
        currentPassword: '',
        newPassword: '',
        confirmPassword: '',
    };
    passwordRule = {
        currentPassword: [
            {
                required: true,
                message: '旧密码是必须的',
                trigger: 'blur',
            },
        ],
        newPassword: [
            {
                required: true,
                message: '新密码是必须的',
                trigger: 'blur',
            },
            {
                min: 6,
                trigger: 'blur',
                message: '新密码至少要6位',
            },
        ],
        confirmPassword: [
            {
                required: true,
                message: '确认密码是必须的',
                trigger: 'blur',
            },
            {
                validator: (rule, value, callback) => {
                    if (value !== (this.$refs.password as any).value) {
                        callback(new Error('两次输入的密码不一致'));
                    } else {
                        callback();
                    }
                },
                trigger: 'blur',
            },
        ],
    };

    visibleChange(value: boolean) {
        if (!value) {
            this.reset();
            this.$emit('input', value);
        }
    }

    reset() {
        (this.$refs.passwordForm as any).resetFields();
    }

    async save() {
        (this.$refs.passwordForm as any).validate(async (valid: boolean) => {
            if (valid) {
                await this.$store.dispatch({
                    type: 'app/changePassword',
                    data: {
                        currentPassword: this.currentUser.currentPassword,
                        newPassword: this.currentUser.newPassword,
                    },
                });
                this.$Message.success({
                    background:true,
                    content: '您的密码已修改成功',
                    duration: this.$config.duration,
                });
                this.$emit('input', false);
            }
        });
    }

    cancel() {
        this.$emit('input', false);
    }
}
</script>

<style lang="less" scoped>

</style>
